<!-- 问卷回顾 -->
<template>
  <div class="questionnaire" :style="containerStyle">
    <transition name="des">
      <div v-if="!activeItem.majorCode" class="qs-des">
        {{ description }}
      </div>
    </transition>
    <div class="panel scroll-panel" @scroll="changeScrollValue">
      <template v-if="dataList.length">
        <template v-for="(item, index) in dataList" :key="item.majorCode">
          <transition name="item-down">
            <div
              v-if="
                !activeItem.majorCode || activeItem.majorCode === item.majorCode
              "
              class="panel-item"
              :class="panelItemClass(item)"
              :style="activeStyle"
              @click="handleClick(item)"
              @mouseenter="(e) => handleMouse(e, 'add')"
              @mouseleave="(e) => handleMouse(e, 'remove')"
            >
              <div class="t-left">
                <div class="num">{{ addZero(index + 1) }}</div>
                <slot :name="`statistics${item.majorCode}`" :itemData="item"></slot>
              </div>
              <svg-icon
                icon-class="arrow"
                class="open"
                :w="80"
                :h="80"
                :class="{ collapse: activeItem.majorCode === item.majorCode }"
              />
            </div>
          </transition>
        </template>
        <transition name="fade">
          <template v-if="activeItem.majorCode">
            <slot name="content"></slot>
          </template>
        </transition>
      </template>
    </div>
  </div>
</template>

<script setup>
  import useConfig from "./useConfig";
  import useStyle from "./useStyle";
  import { computed } from "vue";
  const props = defineProps({
    description: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  });
  const containerStyle = computed(() => {
    let style = {};
    if (activeItem.value.majorCode) style.paddingTop = "86px";
    return style;
  });
  const addZero = (val) => val.toString().padStart(2, "0");
  // 数据列表相关
  const { activeItem, riskModalValue, handleClick } = useConfig();

  // 样式相关
  const { panelItemClass, activeStyle, handleMouse, changeScrollValue } =
    useStyle({ activeItem, props, riskModalValue });
</script>
<style lang="less" scoped>
  @import "./index.less";
</style>
